/**
 * Cube.Element wraps a HTMLElement inside it's own container, in where you can use more methods etc.
 * 
 * @class Cube.Element 
 */
Cube.define("Cube.Element", {
	dom: null,
	
	classes: [],
	
	listeners: {},
	
	constructor: function(el) {
		this.dom = el;
		
		return this;
	},
	
	addListener: function(evt, fn, scope) {
		var wrap = function(e) {
			if (!e) { e = window.event; }

			fn.call(scope, e);	
		};
		
		if (this.dom.addEventListener)
		{
			this.dom.addEventListener(evt, wrap, false);
		}
		else
		{
			this.dom.attachEvent('on' + evt, wrap);
		}
		
		this.listeners[evt] = this.listeners[evt] || [];
		this.listeners[evt].push(wrap);
	},
	
	removeListener: function(evt) {
		Cube.each(this.listeners[evt], function(fn, index) {		
			this.dom["on" + evt] = null;
			
			if (this.dom.removeEventListener)
			{
				this.dom.removeEventListener(evt, fn);
			}
			else
			{
				this.dom.detachEvent('on' + evt, fn);
			}
		}, this);
	},
	
	on: function(object, scope) {
		Cube.each(object, function(value, index) {
			this.addListener(index, value, scope);
		}, this);
	},
	
	/**
	 * Add class to element
	 * 
	 * If you want, you can add multiple classes at once, by adding them as arguments.
	 * 
	 * 	element.addClass('class1', 'class2', 'class3');
	 * 
	 * @param {String} className
	 */
	addClass: function(className) {
		Cube.Array.each(arguments, function(value, index) {
			this.classes.push(value);
		}, this);
		
		this.dom.className = this.classes.join(' ');
	},
	
	/**
	 * Remove a class from a component
	 * 
	 * @param {String} className 
	 */
	removeClass: function(className) {
		Cube.Array.each(arguments, function(value, index) {
			for (i = 0; i < this.classes.length; i++)
			{
				if (value == this.classes[i])
				{
					this.classes.splice(i, 1);
				}
			}
		}, this);
		
		this.dom.className = this.classes.join(' ');
	},
	
	setStyle: function(style) {
		this.dom.setAttribute('style', style);
	},
	
	getStyle: function() {
		return this.dom.getAttribute('style');
	},
	
	setPosition: function(position) {
		this.dom.style.position = position;
	},
	
	getPosition: function() {
		return this.dom.style.position;
	},
	
	setMinWidth: function(minWidth) {
		minWidth = (typeof minWidth === "number") ? minWidth + 'px' : minWidth;
		if (minWidth) this.dom.style.minWidth = minWidth;
	},
	
	setMinHeight: function(minHeight) {
		minHeight = (typeof minHeight === "number") ? minHeight + 'px' : minHeight;
		if (minHeight) this.dom.style.minHeight = minHeight;
	},
	
	setWidth: function(width) {
		width = (typeof width === "number") ? width + 'px' : width;
		if (width) this.dom.style.width = width;
	},
	
	setHeight: function(height) {
		height = (typeof height === "number") ? height + 'px' : height;
		if (height) this.dom.style.height = height;
	},
	
	setLeft: function(left) {
		left = (typeof left === "number") ? left + 'px' : left;
		if (left) this.dom.style.left = left;
	},
	
	getLeft: function() {
		return this.dom.offsetLeft;
	},
	
	setTop: function(top) {
		top = (typeof top === "number") ? top + 'px' : top;
		if (top) this.dom.style.top = top;
	},
	
	getTop: function() {
		return this.dom.offsetTop;
	},
	
	setCursor: function(cursor) {
		this.dom.style.cursor = cursor;
	},
	
	setHtml: function(html) {
		this.dom.innerHTML = html;
	}
});